<template>
	<!-- 底部新建/删除/移动 操作 -->
	<view class="cs-note-opear">
		<view class="cs-note-opear-li" v-for="(item,index) in btn_arr" :key='index' @click="opearTion(item.title)">
			<text :class="['iconfont icon_caozuo', item.icon]"></text>
			<text class="li-btn">{{item.title}}</text>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			btn_arr: Array, // 是一个数组，里面分别是title: 按钮名称 icon: 按钮图标,以对象的形式存储起来
		},
		methods: {
			// 操作
			opearTion(title) {
				this.$emit('opearTion', title)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.cs-note-opear{
		display: flex;
		position: fixed;
		padding: 18upx 0;
		bottom: 0;left: 0;right: 0;
		justify-content: space-around;
		z-index: 1;
		text-align: center;
		font-size: 32upx;
		color: #666666;
		background: #FFFFFF;
	}
	
	// 单个按钮和多个按钮的样式
	.li-btn {
		padding-left: 10upx;
		vertical-align: 2upx;
	}
	.cs-note-opear-li:only-child > .li-btn{
		padding-left: 22upx;
	}
	
	// 图标： 操作
	.icon_caozuo{
		font-size: 36upx;
	}
</style>
